<template >
	<div>
		<template v-for="(item , index) in myitems">
		   <li v-if="item.isshow" @click="addoperating">
				<table>
					<tr>
						<td class="circle " :class="{'circle-check':item.ischecked}" @click="upstatus(index)"><span > <i>√</i>  </span></td>
						<td class="list-li-cont " :class="{'cont-checked':item.ischecked}" @mouseover="enter(index)" @mouseout="leave(index)">
							<span >
								{{item.content}}
							</span>
						</td>
						<td class="list-li-cont-i" :class="{'list-i-check':item.isdel}"  @mouseover="enter(index)" @mouseout="leave(index)" @click="del(index)" > <i >×</i>  </td>
					</tr>
				</table>
			</li> 
		</template>
	</div>
</template>

<script>

import bus from './assets/eventbus';

export default {
	name:'mycontent',
	props:['items'],
	data:function(){
		return {
			myitems:this.items,
		}
	},
	methods:{
		upstatus (index) {
	      this.myitems[index].ischecked = !this.myitems[index].ischecked
	      let val = this.myitems[index]
	      this.myitems.splice(index, 1, val)
	    },
	    enter (index) {
	      this.myitems[index].isdel = true
	    },
	    leave (index) {
	      this.myitems[index].isdel = false
	    },
	    del (index) {
	      this.myitems.splice(index, 1)
	      console.log('1212', this.myitems)
	    },
	    addoperating(){
	    	bus.num++;
	    	bus.$emit("operationnumber",bus.num)
	    }
	},
	watch:{
		items:function( val, oldval ){
			this.myitems = val;
		}
	}
}
</script>

<style>

</style>
